<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Categories</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <style>
        *{
            cursor: default;
        }
        html{width:100%;
            height:100%}
        body{width:100%;
            height:100%;
            background: url(images/login_bgx.gif) no-repeat;
            background-size:cover;     /*这里设置了背景图片为覆盖，以填满整个容器*/
        }
        .main_list{
            margin-left: 20%;
            margin-top: 10%;
            margin-bottom: 10%;
            font-family: 仿宋;
            font-size:20px;
            font-weight: bold;
        }
        #main_list{
            margin-top: 0%;
        }
        .main_list:hover{
            color:dimgrey;
        }
        .opreate:hover{
            color: #1b6d85;
        }

    </style>
</head>
<body>
<div style="width: 30%;height:100%;float: left">
    <div style="width: 60%;height: 80%;margin-left: 20%;margin-top: 10%;border-right-style:solid;border-right-width:1px;border-right-color:rosybrown ;">
        <div style="padding-top: 20%">
            <ul style="list-style:none; " id="main_list">
                <li class="main_list"><a href="categories.html">分类</a></li>
                <li class="main_list"><a href="articleManage.html">文章</a></li>
                <li class="main_list"><a href="aboutMange.html">关于</a></li>
                <li class="main_list">留言</li>
            </ul>
        </div>
    </div>
</div>
<div style="width: 70%;height:100%;float: right">
    <div style="margin-top: 10%">
        <p style="font-weight: 200;font-size: 30px">Article</p>
    </div>
    <div style="margin-top: 5%">
        <table class="table table-bordered"style="text-align: center;">
            <thead>
            <tr id="table_header">
                <td>id</td>
                <td>CreateTime</td>
                <td>content</td>
                <td>categories</td>
                <td>UpdateTime</td>
                <td>title</td>
                <td>opreate</td>
            </tr>
            </thead>
            <tbody id="data">

            </tbody>
        </table>
        <div style="margin-top: 2%"><a href="addArticle.html" id="add"style=" text-decoration: none;"><p>添加</p></a>
            <div id="totalPage">

            </div>
                <div><input type="text" id="page" name="page"></div>
                <button id="redirect">跳转</button>
        </div>
    </div>
</div>
</body>
<script src="js/model.js"></script>
<script src="js/view.js"></script>
<script src="js/controller.js"></script>
<script type="application/javascript">
    $(function() {
       mvc.controller.getArticleList03();
    });
    function dele(e){
        if(window.confirm('你确定要删除吗？')){
            //alert("确定");
             var id = e.name;
            console.log(id);
            mvc.controller.deleteArticle(id);
        }else{
            //alert("取消");
            return false;
        }
    }
    function upda(e) {
        console.log(e.name);
        window.location.href = 'updateArticle.html?id='+  e.name;
    }
    $('#redirect').click(function () {
        $('#data').html('');
        var page = $('#page').val();
        mvc.controller.getArticleList04(page);
    });
</script>

</html>